<!DOCTYPE html>

<html class="no-js" lang="en" xmlns="http://www.w3.org/1999/xhtml" xmlns:th="http://www.thymeleaf.org"> 

<head th:replace="common/sections :: header-css"/>

<body>


	<!-- Left Panel -->
	<aside th:replace="common/menus :: left-panel"></aside>

    <!-- Right Panel -->
	<div id="right-panel" class="right-panel">
	
		<header th:replace="common/menus :: rp-header"/>
		
		<div th:replace="common/menus :: rp-breadcrumbs (pageTitle='Profile')"/>
    
    	<!-- Page Content Begin -->
    
	    	<div class="content mt-3">
	            <div class="animated fadeIn">
	                
	            	<div class="row">				
		    			<div class="col-lg-12">
	                    	<div class="card">
                      			<div class="card-header bg-flat-color-1">
                        			<strong class="card-title text-white">Update Profile</strong>
                      			</div>
	                      		<form th:action="@{/user/profile}" method="post">
	                     			<div class="card-body card-block">
	                     				<div class="form-group text-left">
                                			<div class="sufee-alert alert with-close alert-success alert-dismissible fade show" th:if="${successMsg}">
                      							<span class="badge badge-pill badge-success">Success</span>
                          						<span th:text="${successMsg}"></span>
                        						<button type="button" class="close" data-dismiss="alert" aria-label="Close">
                          							<span aria-hidden="true">&times;</span>
                      							</button>
                  							</div>
                  						</div>
		                     			<div class="row form-group">
		    								<div class="col col-sm-4">
					                            <label for="title" class=" form-control-label"><strong>Title</strong></label>
					                              <select name="title" id="title" class="form-control" th:field="${userProfile.title}" required>
					                                <option value="">Please select</option>
					                                <option value="Mr.">Mr.</option>
					                                <option value="Ms.">Ms.</option>
					                                <option value="Mrs.">Mrs.</option>
					                              </select>
					                        </div>
					                   	</div>
					                   	<div class="row form-group">
					                        <div class="col col-sm-4">
					                            <label class="form-control-label"><strong>First Name</strong></label>
					                            <input type="text" class="form-control" id="firstName" th:field="${userProfile.firstName}" required>
					                        	<small class="form-text text-muted">ex. James</small>
					                        </div>
					                        <div class="col col-sm-4">
					                            <label class="form-control-label"><strong>Last Name</strong></label>
					                            <input type="text" class="form-control" id="lastName" th:field="${userProfile.lastName}" required>
					                        	<small class="form-text text-muted">ex. Smith</small>
					                        </div>
					                   	</div>
					                   	<hr>
					                   	<div class="row form-group">
					                       	<div class="col col-sm-4">
					                            <label><strong>Home Phone</strong></label>
					                            <input type="text" class="form-control" id="homePhone" th:field="${userProfile.homePhone}" required th:pattern="${patternPhone}" th:title="${patternPhoneMSG}">
					                        	<small class="form-text text-muted">ex. (547) 392-5436</small>
					                        </div>
					                        <div class="col col-sm-4">
					                            <label><strong>Mobile Phone</strong></label>
					                            <input type="text" class="form-control" id="mobilePhone" th:field="${userProfile.mobilePhone}" th:pattern="${patternPhone}" th:title="${patternPhoneMSG}">
					                        	<small class="form-text text-muted">ex. (547) 392-5436</small>
					                        </div>
					                        <div class="col col-sm-4">
					                            <label><strong>Work Phone</strong></label>
					                            <input type="text" class="form-control" id="workPhone" th:field="${userProfile.workPhone}" th:pattern="${patternPhone}" th:title="${patternPhoneMSG}">
					                        	<small class="form-text text-muted">ex. (547) 392-5436</small>
					                        </div>
					                 	</div>
				                  		<hr>
						                <div class="row form-group">
						                  		<div class="col col-sm-4">
						                            <label><strong>Address</strong></label>
						                            <input type="text" class="form-control" id="address" th:field="${userProfile.address}" required>
						                        	<small class="form-text text-muted">ex. 123 Digital Lane</small>
						                        </div>
						                </div>
						                <div class="row form-group">
						                	<div class="col col-sm-4">
						                    	<label><strong>Locality</strong></label>
						                        <input type="text" class="form-control" id="locality" th:field="${userProfile.locality}" required>
						                    	<small class="form-text text-muted">ex. Internet City</small>
						                  	</div>
						                    <div class="col col-sm-4">
						                        <label><strong>Region</strong></label>
						                        <input type="text" class="form-control" id="region" th:field="${userProfile.region}" required>
						                       	<small class="form-text text-muted">ex. CA</small>
						                    </div>
						                    <div class="col col-sm-4">
						                        <label><strong>Postal Code</strong></label>
						                        <input type="text" class="form-control" id="postalCode" th:field="${userProfile.postalCode}" required>
						                       	<small class="form-text text-muted">ex. 94302</small>
						                    </div>
						               	</div>
				                 		<div class="row form-group">
				                        	<div class="col col-sm-4">
				                            	<label><strong>Country</strong></label>
				                            	<input type="text" class="form-control" id="country" th:field="${userProfile.country}" required>
				                        		<small class="form-text text-muted">ex. US</small>
				                        	</div>
				                		</div>
                      				</div> <!-- End Card Body -->
                   			
                   					<div class="card-footer">
                     					<button type="submit" class="btn btn-primary btn-sm"><i class="fa fa-dot-circle-o"></i> Submit</button>
                     					<button type="reset" class="btn btn-danger btn-sm"><i class="fa fa-ban"></i> Reset</button>
                  					</div> <!-- End Card Footer -->	
                     			</form>
                    		</div> <!-- End Card -->
                 		</div> <!-- End Column-->
                	</div> <!-- End Row -->
                	
	            </div><!-- .animated -->
	        </div><!-- .content -->
	        
	    <!-- Page Content End -->
	    
	</div> <!-- End right panel -->
    
	<!-- Footer -->
	<div th:replace="common/sections :: footer-scripts"></div>

</body>
</html>
